import React from 'react'

import { Route, NavLink, Switch, Redirect, useParams, useLocation } from 'react-router-dom'

const Home = () => {
  let {state: {id}} = useLocation()
  return (
    <div>home: {id}</div>
  )
}

const About = () => {
  let {id} = useParams()
  return (
    <div>about: {id}</div>
  )
}

const Search = () => {
  let { search } = useLocation()
  let query = new URLSearchParams(search)
  return (
    <div>search: { query.get('id') }</div>
  )
}

const Page404 = () => {
  return (
    <div>Page404</div>
  )
}

const Params = () => {
  return (
    <>
      <ul>
        <li><NavLink to={{pathname: '/home', state: { id: 13 }}}>Home</NavLink></li>
        <li><NavLink to="/about/12">About</NavLink></li>
        <li><NavLink to="/search?id=14">Search</NavLink></li>
      </ul>
      <Switch>
        <Route path="/home"><Home></Home></Route>
        <Route path="/about/:id"><About></About></Route>
        <Route path="/search"><Search></Search></Route>
        <Redirect exact from='/' to={{pathname: '/home', state: { id: 13 }}}></Redirect>
        <Route path="*">
          <Page404></Page404>
        </Route>
      </Switch>
    </>
  )
}

export default Params
